import Home from "../pages/Home";
import JumpSet from "../pages/lys/JumpSet";
import MyExcel from "../pages/lys/MyExcel";
import BarChart from "../pages/echarts/BarChart";
import EchartTest from "../pages/echarts/EchartTest";
import RichEditor from "../pages/lys/RichEditor";

import SlateEditor from "../pages/lys/SlateEditor";
import { Route } from "react-router-dom";
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';
// import { BrowserRouter as Router, Navigate, Route, Routes } from 'react-router-dom';

const routersConfig = [
  {
    label: '首页',
    key: 'home',
    path: '/home',
    icon: <DesktopOutlined />,
    element: <Home/>
  },
  {
    label: '连亿顺',
    key: 'lys',
    path: '/lys',
    icon: <FileOutlined />,
    children: [
      {
        label: '跳转设置',
        key: 'jumpSet',
        path: '/jumpSet',
        element: <JumpSet/>
      },
      {
        label: '自由式表格',
        key: 'myExcel',
        path: '/myExcel',
        element: <MyExcel/>
      },
      {
        label: 'slate富文本',
        key: 'richEditor',
        path: '/richEditor',
        element: <RichEditor/>
      },
    ]
  },
  {
    label: 'Echarts图表',
    key: 'echarts',
    path: '/echarts',
    icon: <FileOutlined />,
    children: [
      {
        label: '柱状图',
        key: 'bar',
        path: '/bar',
        element: <BarChart/>
      },
      {
        label: '柱状图',
        key: 'test',
        path: '/test',
        element: <EchartTest/>
      },
      {
        label: '富文本',
        key: 'slateEditor',
        path: '/slateEditor',
        element: <SlateEditor/>
      },
    ]
  },
]

const getMenu = (config, path) => {
  if (config.children) {
    return {
      ...config,
      key: `${path}/${config.key}`,
      children: config.children.map(item => getMenu(item, `${path}/${config.key}`))
    }
  } else {
    return {
      ...config,
      key: `${path}/${config.key}`
    }
  }
}

const menuData = routersConfig.map(item => {
  return getMenu(item, '')
})


const getRouter = (routers: any[]): any => {
  return routers.map((item: any) => {
    if (item.children) {
      return <Route key={item.key} path={item.key} element={item.element}>
        {getRouter(item.children)}
      </Route>
    } else {
      return <Route key={item.key} path={item.key} element={item.element}/>
    }
  })
}

const getRenderRouter = getRouter(routersConfig)

export { getRenderRouter, routersConfig, menuData }